<#import "incloud-template.ftl" as layout>
<@layout.registrationLayout displayInfo=true; section>
    <#if section = "header">
        ${msg("emailAuthTitle",realm.displayName)}
    <#elseif section = "form">
      <form id="kc-email-code-login-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
        <div class="${properties.kcFormGroupClass!}">
          <div class="${properties.kcLabelWrapperClass!}">
            <label for="code" class="${properties.kcLabelClass!}">${msg("emailAuthLabel")}</label>
            <input type="text" id="code" name="code" class="${properties.kcInputClass!}" autofocus />
          </div>
        </div>
        <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
          <div>
            <button id="btnReSend" type="button" onclick="window.location.reload();">重新发送邮件</button>
          </div>

          <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
            <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}"/>
          </div>
        </div>
      </form>
      <script type="text/javascript">
        var btnReSend = document.getElementById("btnReSend");
        var counting = parseInt(${counting});
        function countDown() {
          counting--;
          if (counting > 0) {
            btnReSend.innerHTML = "(" +counting + "s" + ")";
            btnReSend.setAttribute("disabled", "disabled");
            setTimeout(countDown, 1000);
          } else {
            btnReSend.innerHTML = "重新发送邮件";
            btnReSend.removeAttribute("disabled");
          }
        }
        countDown();
      </script>
    <#elseif section = "info">
        ${msg("emailAuthInstruction", email)}
    </#if>
</@layout.registrationLayout>
